<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染v-for</title>
    <style>
        img{
            width: 100px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    v-for指令
        1.用于展示列表数据
        2.语法 v-for="(item,index) in items" :key="item.id"
        3.可遍历数组 对象,字符串(几乎不用)
    -->
<div id="root">
<h2>人员列表</h2>
<!--    遍历数组-->
    <ul>
        <li v-for="(person,index) in persons" :key="person.id">
            {{ person.name }}
        </li>
    </ul>
    <hr>
    <h2>电动车信息</h2>
    <ul>
        <li v-for="(key,value) in car" :key="key">
            {{ key }}-----{{value}}
        </li>
    </ul>
    <hr>
    <h2>测试遍历字符串(几乎不用)</h2>
    <ul>
        <li v-for="(char,index) in str" :key="index">
            {{ index }}----{{char}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    new Vue({
        el:"#root",
        data(){
            return {
                persons:[
                    {id:"001",name:"老李",age:18,sex:"男"},
                    {id:"002",name:"老张",age:19,sex:"女"},
                    {id:"003",name:"老孙",age:20,sex:"男"}
                ],
                car:{
                   name:'雅迪',
                   price:2000,
                   color:"灰色"
               },
                str:"hello world"
            }
        }
    })
</script>
</body>
</html>